<template>
  <el-card class="page-tools">
    <el-row type="flex" justify="space-between" align="middle">
      <el-col>
        <!-- 前插槽 -->
        <!-- 插槽  有name值的叫具名插槽，没有的叫匿名插槽-->
        <div v-if="showBefore" class="before">
          <i class="el-icon-info" />
          <!-- 图标跟随showBefore来显示隐藏 -->
          <slot name="before" />
        </div>
      </el-col>
      <el-col>
        <!-- 后插槽 -->
        <el-row type="flex" justify="end">
          <slot name="after" />
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>
<script>
// 组件可以显示左侧内容，也可以显示右侧内容，如果左侧内容不传递，就不下显示
export default {
  name: 'PageToolsIndex', // 组件名称
  components: {// 注册组件
  },
  filters: {// 局部过滤器
  },
  props: { // 父传递数据
    showBefore: { // 控制左侧图标是否显示
      default: false, // 默认隐藏状态
      type: Boolean
    }
  },
  data () { // 数据变量
    return {
    }
  },
  computed: {// 计算属性
  },
  watch: {// 事件侦听
  },
  activated () { // 组件激活时调用的函数
  },
  created () { // data数据加载完毕执行函数
  },
  mounted () { // DOM首次加载完毕时执行的函数
  },
  updated () { // 数据更新时执行的函数,执行多次
  },
  methods: {// 函数定义
  }

}
</script>
<style lang='scss' >
.page-tools {
    margin: 10px 0;
    .before {
      line-height: 34px;
    i {
      margin-right: 5px;
      color: #409eff;
    }
    display: inline-block;
    padding: 0px 10px;
    border-radius: 3px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
  }
 }
</style>
